﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>父传子props</title>
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <script src="../js/jquery-2.2.0.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
<h1>父传子props</h1><br/>

<div id="app">
    {{name}}<br/>

    <!--
        当前组件的属性=父级的值
        需要注意的是在vue2.0开始父级的data数据改变会影响子级，但是反过来子级改变了不会影响父级
    -->
    <child :pp="money"></child>
    <child m="1">当父级没传pp给子级，那么这两个组件不是同样的东西了..当m是属性的时候那它的值永远都是String类型的也就是说这里的1是String</child>
    <child :m="true"><!--直接把文本写在里面页面不会被传递-->当m是绑定的，那它的值会认为是一个表达式.也就是说这里的true其实是Boolean类型的并不是字符串true</child>
</div>
<script src="../js/vue-2.5.16.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../node_modules/lodash/lodash.js"></script>

<script>

    var app = new Vue({
        el:'#app',
        data:{
            name:'模版数据',
            money:1000
        },
        components:{
            //这里注册组件名是可以任意起名的不一定要叫child可以起名为aaaa
            //一个component其实可以看作又是一个新的Vue实例，只不过是子级
            child:{
                //注意使用props:[]形式   不能验证  pp  的值是不是子组件想要的
                //props:['pp'],//接收父组件传过来的属性，在组件这边写上props。里面是一个数组形式的。值为pp     所以这个时候就可以通过  this.pp来取了
                //props对象的方式  pp写成空对象表示不校验，也就是等价于数组形式
                /*props:{
                    pp:{}
                },*/

                //组件里的data在return的时候不能再有pp数据了，computed也是同理，因为都可以用this.的方式取到
                props:{
                    //其中必传值，又要使用那就不写default属性就可以了
                    pp:{
                        //required:true,//此属性必传递如果不传会调用default，而且该属性不能和default同时出现      加上这个只会出现warn页面还是能正常运行的
                        type:[String,Function,Object,Array,Number,Boolean],//这里是校验肉类,记住是大写开头
                        default:0,//不传则是默认值   这里的不传是指  child组件里连  :pp="money"  这一段都不写   如果是  pp="1"  或者 :pp="money"而这里的money为空字符串也算是传了
                        //自定义校验器
                        validator(currentVal){
                            return currentVal>2000;//不满足这个条件又会报warn   话说没理解作用是啥？只是报warn
                        }
                    }
                },
                template:'<div>{{pp}}</div>'
            }
        }
    });
</script>

</body>
</html>